<template>
  <div class="upload-container">
    <el-upload
      class="upload-demo"
      action="''"
      :limit="maxcount"
      :http-request="upload"
      :on-exceed="handleExceed"
      :show-file-list="false"
      :on-remove="()=>{}"
      :disabled="disabled"
    >
      <div class="upload-box">
        <el-button :class="!disabled ? 'img_but' : ''" :disabled="disabled">上传</el-button>
        <div slot="tip" class="img_div">{{ tip }}</div>
      </div>

      <div class="file-box">
        <div v-for="(item, index) in urlList" :key="index">
          <span class="span-url" @click="look(item)">{{ fileNameList[index] | ellipsis }}</span>
          <i v-if="!disabled" class="el-icon-circle-close" @click="rmImage(index,$event)" />
        </div>
      </div>
    </el-upload>
  </div>
</template>
<script>
import OSS from 'ali-oss'
import {
  oss_accessKeyId,
  oss_accessKeySecret,
  oss_bucket,
  oss_host,
  oss_regionId
} from '@/api/config'
import { getFileSuffix } from '@/utils/common'
import { Loading } from 'element-ui'

export default {
  name: 'SingleFileUpload',
  filters: {
    ellipsis(value) {
      if (!value) return ''
      if (value.length > 6) {
        return value.slice(0, 6) + '...'
      }
      return value
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    id: {
      type: String,
      default: ''
    },
    maxcount: {
      type: Number,
      default: 1
    },
    title: {
      type: String,
      default: ''
    },
    format: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: true
    },
    urls: {
      type: String,
      default: function() {
        return ''
      }
    },
    tip: {
      type: String,
      default: '可上传PDF、视频(mp4)、图片(jpg / png / jpeg)'
    }
  },
  data() {
    return {
      urlList: [],
      fileNameList: [],
      ossParameter: {
        region: oss_regionId,
        accessKeyId: oss_accessKeyId,
        accessKeySecret: oss_accessKeySecret,
        bucket: oss_bucket,
        host: oss_host
      },
      loadingId: null
    }
  },
  created() {
    this.showImage()
  },
  methods: {
    look(item) {
      window.open(item)
    },
    handleExceed() {
      this.$message.warning('超出最大上传数量！')
    },
    showImage() {
      console.log(this.urls)
      if (this.urls !== undefined && this.urls !== '') {
        this.urlList = this.urls.split(',')
        this.urlList.forEach(item => {
          const name = item.split('upload/')[1]
          this.fileNameList.push(name)
        })
        if (this.urlList[this.urlList.length - 1] === undefined) {
          delete this.urlList[this.urlList.length - 1]
        }
      }
    },
    rmAll() {
      this.fileNameList = []
      this.urlList = []
      this.$emit('getImage', '')
    },
    rmImage(index, e) {
      e.stopPropagation()
      this.urlList.splice(index, 1)
      this.fileNameList.splice(index, 1)
      this.$emit('getImage', this.urlList.join(','))
    },
    upload(item) {
      var hasFile = this.fileNameList.includes(item.file.name)
      if (hasFile) {
        this.$message.error('文件重复')
        // that.loadingId.close()
        return
      }
      let fileSuffix = getFileSuffix(item.file)
      fileSuffix = fileSuffix.toLowerCase()
      var formatList
      if (this.format !== '') {
        formatList = this.format.split(',')
        if (formatList.indexOf(fileSuffix) < 0) {
          this.$message.error('只能上传' + this.format + '格式文件')
          return
        }
      }
      this.loadingId = Loading.service({
        fullscreen: true,
        text: '上传中，请稍等...'
      })
      const that = this
      const client = new OSS(this.ossParameter)
      const date = new Date()
      let filename = '/images/' + date.getTime() + '/upload/' + item.file.name
      filename = filename.replace(/,/g,"");
      client
        .put(filename, item.file)
        .then(response => {
          const url = that.ossParameter.host + filename
          // this.urlList = this.urls.split(',')
          that.urlList.push(url)
          that.fileNameList.push(item.file.name)
          that.$emit('getImage', that.urlList.join(','))
          that.loadingId.close()
        })
        .catch(err => {
          console.log('err:', err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "src/styles/mixin.scss";

  .upload-box{
    width: 100%;
    display: flex;
    align-items: center;
  }

  .upload-container {
    /*width: 100%;*/
    display: flex;
    justify-content: flex-start;
    // align-items: flex-start;
    position: relative;
    @include clearfix;

    .image-uploader {
      float: left;

    }

    .image-preview {
      width: auto;
      height: 200px;
      display: flex;
      flex-direction: row;
      position: relative;
      border: 1px dashed #d9d9d9;
      float: left;
      margin-left: 50px;

      .image-preview-wrapper {
        position: relative;
        width: auto;
        // margin-left:10px ;
        height: 100%;

        img {
          height: 100%;
        }
      }

      .image-preview-action {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        cursor: default;
        text-align: center;
        color: #fff;
        opacity: 0;
        font-size: 20px;
        background-color: rgba(0, 0, 0, .5);
        transition: opacity .3s;
        cursor: pointer;
        text-align: center;
        line-height: 200px;

        .el-icon-delete {
          font-size: 36px;
        }
      }

      &:hover {
        .image-preview-action {
          opacity: 1;
        }
      }
    }

    .image-app-preview {
      width: auto;
      height: 180px;
      position: relative;
      border: 1px dashed #d9d9d9;
      float: left;
      margin-left: 50px;

      .app-fake-conver {
        height: 44px;
        position: absolute;
        width: 100%; // background: rgba(0, 0, 0, .1);
        text-align: center;
        line-height: 64px;
        color: #fff;
      }
    }
  }

  .el-upload-list__item div.filediv {
    width: 100%;
    height: 100%;
  }

  ::v-deep .el-upload-list__item div.filediv img {
    width: 100%;
    max-width: 100%;
  }

  ::v-deep .el-upload__text {
    line-height: 30px;
  }
  .img_but {
    width: 84px;
    height: 33px;
    color: #5ac6b7;
    border-color: #5ac6b7;
  }
  .img_div {
    color: #d0d0d0;
    padding-left: 10px;
  }
  .el-icon-circle-close{
    color: red;
  }
  .span-url{
    color: #5ac6b7;
  }
  .file-box{
    display: flex;
    flex-wrap: wrap;
    >div {
      margin-right: 20px;
    }
  }
</style>
